Reusable Components in React JS – Detailed Notes

Reusable Components are an important concept in React JS. They allow developers to create a UI element once and use it multiple times in different parts of an application. By using reusable components, developers can reduce code duplication, improve maintainability, and build consistent user interfaces.

Explore the JustAcademy React JS Training Course and Register for React JS Course Demo.

1. What Are Reusable Components in React?

A reusable component is a React component that can be used in multiple places within an application without rewriting its entire implementation. It can display different information depending on the props passed to it.

For example, an application may need several buttons, product cards, navigation bars, profile sections, or form fields. Instead of creating separate code for every instance, developers can create one component and reuse it wherever required.

Example

function Welcome() {
  return <h2>Welcome to React JS!</h2>;
}
function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
      <Welcome />
    </div>
  );
}
export default App;

Explanation: The Welcome component is defined once and rendered three times inside the App component.

2. Why Are Reusable Components Important?

• Code reusability: Write a component once and use it in multiple places.
• Less code duplication: Avoid repeating the same JSX and logic.
• Easy maintenance: Update a shared component in one place to improve all its instances.
• Consistent UI: Keep buttons, cards, headings, and other elements visually consistent.
• Better readability: Divide a large interface into smaller, meaningful components.
• Faster development: Build new pages using components that already exist.
• Easy testing: Small components are often easier to test independently.

3. How Do Reusable Components Work?

Reusable components are commonly created using functional components, JSX, and props. The parent component renders a reusable child component and passes the data needed to customize it.

1. Create a functional component.
2. Identify the parts of its UI that should be configurable.
3. Accept those values through props.
4. Render the component wherever it is needed.
5. Pass different props to display different content or styles.

Basic syntax

function ComponentName({ propName }) {
  return <div>{propName}</div>;
}
function App() {
  return <ComponentName propName="Hello React" />;
}

Note: React component names should begin with a capital letter. Props are read-only inputs; a component should not modify them directly.

4. Reusing Components with Props

Props allow a reusable component to receive different data from its parent. This makes one component adaptable to different situations.

Example: Reusable greeting component

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}
function App() {
  return (
    <div>
      <Greeting name="Aarav" />
      <Greeting name="Priya" />
      <Greeting name="Rahul" />
    </div>
  );
}
export default App;

Output:

Hello, Aarav!
Hello, Priya!
Hello, Rahul!

Explanation: The same Greeting component is reused three times with different values of the name prop.

Common prop types

5. Creating a Reusable Button Component

A button component can be reused for actions such as submitting a form, saving information, or navigating through an interface.

function Button({ label, onClick, type = "button" }) {
  return (
    <button type={type} onClick={onClick}>
      {label}
    </button>
  );
}
function App() {
  function handleSave() {
    alert("Information saved!");
  }
  function handleCancel() {
    alert("Action cancelled!");
  }
  return (
    <div>
      <Button label="Save" onClick={handleSave} />
      <Button label="Cancel" onClick={handleCancel} />
    </div>
  );
}
export default App;

Explanation: The Button component accepts a label and an event handler through props. Each button can have a different label and action while sharing the same component structure.

Best practice: Use appropriate button types. For example, use type="submit" for a form submission button and type="button" for an ordinary action button.

6. Creating a Reusable Card Component

Cards are commonly used to display products, services, courses, profiles, and articles. A single card component can display different information through props.

function CourseCard({ title, duration, price }) {
  return (
    <div className="course-card">
      <h2>{title}</h2>
      <p>Duration: {duration}</p>
      <p>Price: ₹{price}</p>
      <button type="button">View Course</button>
    </div>
  );
}
function App() {
  return (
    <div>
      <CourseCard
        title="React JS"
        duration="8 Weeks"
        price={12000}
      />
      <CourseCard
        title="Flutter"
        duration="10 Weeks"
        price={15000}
      />
    </div>
  );
}
export default App;

Explanation: The same card layout displays two different courses. Only the data changes, not the component's overall structure.

7. Reusable Components with the children Prop

React provides a special prop called children. When content is placed between a component's opening and closing tags, that content is passed to the component through children. This pattern is useful for reusable containers, panels, cards, and layouts.

function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      <div className="panel-content">
        {children}
      </div>
    </section>
  );
}
function App() {
  return (
    <div>
      <Panel title="About React">
        <p>React is a JavaScript library for user interfaces.</p>
      </Panel>
      <Panel title="Learning Goals">
        <ul>
          <li>Learn components</li>
          <li>Understand props</li>
        </ul>
      </Panel>
    </div>
  );
}
export default App;

Explanation: The Panel component provides a common structure while allowing its parent to supply different content. The component does not need to know exactly what that content contains.

8. Reusing Components with Arrays and map()

When the same component must display multiple records, an array and JavaScript's map() method can generate a component for each record.

const products = [
  { id: 1, name: "Laptop", price: 55000 },
  { id: 2, name: "Mobile", price: 20000 },
  { id: 3, name: "Headphones", price: 2500 }
];
function ProductCard({ name, price }) {
  return (
    <div className="product-card">
      <h3>{name}</h3>
      <p>Price: ₹{price}</p>
    </div>
  );
}
function App() {
  return (
    <div>
      {products.map((product) => (
        <ProductCard
          key={product.id}
          name={product.name}
          price={product.price}
        />
      ))}
    </div>
  );
}
export default App;

Explanation: The map() method creates one ProductCard for each product. The key prop helps React identify each item in the list. Use stable, unique IDs when available.

9. Reusable Components in Separate Files

As a project grows, reusable components are often placed in separate files. This improves organization and makes them easier to find and maintain.

Example folder structure

src/
├── components/
│   ├── Button.jsx
│   ├── CourseCard.jsx
│   └── Navbar.jsx
├── App.jsx
└── main.jsx

Button.jsx

export default function Button({ label }) {
  return <button type="button">{label}</button>;
}

App.jsx

import Button from "./components/Button.jsx";
export default function App() {
  return (
    <div>
      <Button label="Login" />
      <Button label="Register" />
    </div>
  );
}

Explanation: The component is exported from one file and imported wherever it is required. The example uses a default export; named exports are also supported in React projects.

10. Reusable Components with Conditional Rendering

A reusable component can display different content or styles depending on its props.

function StatusBadge({ status }) {
  if (status === "active") {
    return <span className="active">Active</span>;
  }
  if (status === "pending") {
    return <span className="pending">Pending</span>;
  }
  return <span className="inactive">Inactive</span>;
}
function App() {
  return (
    <div>
      <StatusBadge status="active" />
      <StatusBadge status="pending" />
      <StatusBadge status="inactive" />
    </div>
  );
}
export default App;

Explanation: One StatusBadge component handles multiple statuses instead of requiring a separate component for each status.

11. Reusable Components with Default Props

Default parameter values provide a fallback when a prop is missing or undefined.

function UserProfile({ name = "Guest", role = "Visitor" }) {
  return (
    <div>
      <h3>Name: {name}</h3>
      <p>Role: {role}</p>
    </div>
  );
}
function App() {
  return (
    <div>
      <UserProfile name="Ananya" role="Student" />
      <UserProfile />
    </div>
  );
}
export default App;

Explanation: The first profile displays the supplied values. The second uses the default name and role because no values were supplied.

12. Reusable Components vs. Non-Reusable Code

13. Best Practices for Reusable Components

• Keep components focused: Each component should have a clear purpose.
• Use meaningful names: Examples include ProductCard, Navbar, and SubmitButton.
• Use props for customization: Pass values instead of hardcoding content that varies.
• Keep props read-only: Do not directly modify props or objects received through props.
• Use children for flexible layouts: This is helpful for panels, wrappers, and containers.
• Keep component definitions at the top level: Avoid defining a component function inside another component function.
• Use stable keys: When rendering arrays, provide a unique, stable key for each sibling item.
• Separate files when useful: Organize components into folders as the project grows.
• Avoid over-generalization: Do not add unnecessary props and complexity just to make a component reusable.
• Use semantic HTML: Choose elements according to their purpose and accessibility needs.
• Test important variations: Check how the component behaves with different props, missing optional data, and edge cases.

14. Common Mistakes in Reusable Components

15. Practical Project: Reusable Product Listing

Project objective: Create a simple product listing page using reusable React components. Each product will share a common layout but display different information.

App.jsx

const products = [
  { id: 1, name: "Laptop", price: 55000, category: "Electronics" },
  { id: 2, name: "Smartphone", price: 22000, category: "Electronics" },
  { id: 3, name: "Backpack", price: 1800, category: "Accessories" }
];
function ProductCard({ name, price, category }) {
  return (
    <article className="product-card">
      <h2>{name}</h2>
      <p>Category: {category}</p>
      <p>Price: ₹{price}</p>
      <button type="button">View Product</button>
    </article>
  );
}
export default function App() {
  return (
    <main>
      <h1>Our Products</h1>
      <div className="product-list">
        {products.map((product) => (
          <ProductCard
            key={product.id}
            name={product.name}
            price={product.price}
            category={product.category}
          />
        ))}
      </div>
    </main>
  );
}

Optional CSS: App.css

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.product-card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.product-card button {
  padding: 8px 12px;
  cursor: pointer;
}

What you learn from this project

• How to create a reusable functional component.
• How to pass data through props.
• How to render multiple components using map().
• How to use stable keys for list items.
• How to organize a UI into reusable pieces.

16. Interview Questions and Answers

Q1. What is a reusable component in React?

Answer: A reusable component is a component that can be rendered in multiple places. Props and composition allow it to display different data or nested content.

Q2. Why do we use reusable components?

Answer: They reduce duplicated code, improve consistency, simplify maintenance, and help developers organize applications.

Q3. How can you customize a reusable component?

Answer: Pass props to the component. For example, passes a name to the Greeting component.

Q4. What is the difference between props and state?

Answer: Props are read-only inputs received by a component. State is data managed by a component, commonly with a Hook such as useState, and can change over time.

Q5. What is the children prop?

Answer: It contains the content nested between a component's opening and closing tags. It allows a component to wrap flexible content.

Q6. Can a reusable component be used multiple times?

Answer: Yes. The same component can be rendered multiple times, with different props for each instance.

Q7. Why are keys needed when rendering lists?

Answer: Keys help React identify list items between renders. Stable and unique keys help React update the correct items.

Q8. Should every small JSX element become a reusable component?

Answer: No. Extract components when it improves clarity, reuse, testing, or maintainability. Excessive splitting can make code harder to follow.

Q9. Can reusable components accept functions as props?

Answer: Yes. A parent can pass a callback function as a prop, for example, an event handler for a button click.

Q10. What is component composition?

Answer: Component composition means combining smaller components to create larger interfaces. Reusable components are often composed together to build complete pages.

17. Revision Checklist

• Understand what reusable components are.
• Know how to create a functional component.
• Understand how props customize a component.
• Know how to use the children prop.
• Practice reusable buttons, cards, and badges.
• Render arrays of components using map() and stable keys.
• Understand component imports and exports.
• Follow React naming conventions and keep props read-only.
• Know when component reuse improves maintainability and when it adds unnecessary complexity.

18. Additional Learning Resources

• React Official Documentation – Your First Component
• React Official Documentation – Passing Props to a Component
• React Official Documentation – Component Rules and Immutability
• JustAcademy React JS Training Course
• Register for React JS Course Demo

Conclusion

Reusable Components help developers create modular, consistent, and maintainable React applications. By combining functional components, props, the children prop, and list rendering, developers can reuse UI elements across pages without duplicating code. Practice building buttons, cards, navigation bars, and product listings to develop a strong understanding of component reusability in React JS.

To learn more, visit the JustAcademy React JS Training Course or register for a React JS course demo.